div[data-controller="inputs-range-group"] {
    .text-input {
        width: 4em;
    }

    .hourly-rate {
        background-color: #{$gray-900};
        color: #{$gray-400};
    }

    .cost {
        width: 5em;
    }

    .unit {
        width: 28px;
    }

    .tick {
        width: 5px;
        height: 1.5rem;
        background-color: $form-range-track-color;
        border-radius: 1rem;

        &.active-color {
            background-color: #{$neon-shade-100} !important;
        }
    }

    // This allows line overhang for rounding range edges.
    .overlay-offset {
        width: calc(100% - 2px);
        margin-left: 1px;
    }

    // Increase offset for ranges with ticks. 
    .input-offset {
        width: 80%;
        margin-left: 3%;
        display: flex;
    }

    .tick-container {
        position: relative;
        top: -24px;
        margin-bottom: -24px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 80%;
        margin-left: 3%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .tick-unit {
        overflow: visible;
        width: 5px;
    }

    .tick-text {
        color: #{$purple};
        &.active-color {
            color: #{$slate-tint-700};
        }
    }

    .line {
        width: 100%; 
        height: 5px; 
        background: linear-gradient(to right, #{$neon-shade-100} 5%, #{$form-range-track-color} 5%);
        position: absolute;
        top: 11px;
        border-radius: 1rem;
    }

    .grab-brightness {
        filter: brightness(90%) !important;
    }

    .range-container {
        position: relative; 

        &:hover {
            .line {
                filter: brightness(110%);
            }

            .active-color {
                filter: brightness(110%);
            }
        }
    }

    // Quick resize fix. This may become a global change later.
    .input-group {
        padding: 8px; 
    }
}
